<template>
  <div class="log-dialog">
    <h2>添加日志</h2>
    <form @submit.prevent="save">
      <textarea v-model="logContent" placeholder="输入日志内容"></textarea>
      <button type="submit">保存</button>
      <button type="button" @click="close">取消</button>
    </form>
  </div>
</template>

<script>
export default {
  emits: ['close', 'save'],
  data() {
    return {
      logContent: ''
    }
  },
  methods: {
    save() {
      if (this.logContent.trim()) {
        this.$emit('save', { content: this.logContent })
        this.logContent = ''
      }
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.log-dialog {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  max-width: 400px;
  margin: 0 auto;
}

textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  margin-right: 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button[type='submit'] {
  background-color: #42b983;
  color: #fff;
}

button[type='button'] {
  background-color: #ccc;
  color: #000;
}
</style>
